import { Tabs,  Col, Row, Radio ,DatePicker ,Select,Badge ,Divider,Button,Card,Image,Pagination,Space } from 'antd';
const { TabPane } = Tabs;
import React, { useState} from 'react';
import {Link,history } from 'umi';
import BarChart from '../../energyAnalysis/components/barChart';
import {
  MergeCellsOutlined,RightOutlined,RetweetOutlined,LeftOutlined,AudioMutedOutlined,InsuranceOutlined
} from '@ant-design/icons';
import back from '/public/back.png';
import styles from './style.less'
import cloneDeep from 'lodash.clonedeep';
const { Option } = Select;

const DeviceNameA: React.FC = () => {

  function callback(key) {
    console.log(key);
  }
  const dataSource = [
  
  ];
  for(let i=1;i<100;i++){
    dataSource.push({
      gatewayID: 'a栋宿舍配电箱',
      instrumentAddress: '2021-09-03 09:53:00',
      equipmentModel: 50.35,
      location: '2021-09-03 09:53:00',
      IOTCardNumber: 50.35,
     
    })

  }

  const columns = [
    {
      title: '网关识别号',
      dataIndex: 'gatewayID'
    },
    {
      title: '仪表地址',
      dataIndex: 'instrumentAddress',
    },
    {
      title: '设备型号',
      dataIndex: 'equipmentModel',
    }, {
      title: '物联网卡号',
      dataIndex: 'IOTCardNumber',
    }, {
      title: '区域位置',
      dataIndex: 'location',
    },
    {
      title: '设备控制',
      key: 'gatewayID',
        render: (text, record) => (
          <Space size="middle">
            <a>Invite {record.equipmentModel}</a>
            <a>Delete</a>
          </Space>
        ),
      }
   
  ];

  var dataAxis = ['0','00', '01', '02', '03', '04', '05', '06', '07', '08', '09'];
var data = [0,0,0,0,0,0,0,0,0];
var name="剩余电流";
var chart={
  dataAxis:dataAxis,
  data:data,
  name:name,
  type:'line',
  legendShow:true
}

  
const [charOption, setChartOption] = useState(chart);
const [shuosuostate, setShuosuostate] = useState(0);

  function handleSizeChange (e) {

    const newChart = cloneDeep(charOption); 
    console.log(e.target.value)
    newChart.name=item[e.target.value];
    console.log(newChart)
    setChartOption(newChart);
    console.log(charOption)
  }

  function changeShouSuoState(){
    setShuosuostate(shuosuostate==0?1:0)
  }


enum item {
  one = "剩余电流",
  two= "温度",
  three = "电流",
  four= "电压",
  five = "有功电能",
  six= "有功功率",
  seven = "无功功率",
  eight= "视在功率",
}


    return (
      <>
        <Row gutter={24}  style={{ margin: '-16px 0 -16px -16px'}} > 
          <Col span={shuosuostate==0?5:0}  style={{padding:0,borderRight: '1px solid #355fb8'  }}>
            <Row  className={styles.shousuoTitle} onClick={changeShouSuoState}><LeftOutlined /> 收起 </Row>
            <div   className={styles.leftContainer}>
              <Row  className={styles.shebeiming}>马达保护器  <span  className={styles.shebeiStateBtn}>正常</span> </Row>
              <Row   className={styles.shibtn}> 实时数据 </Row>
              <Row>  
                <Col span={12}   className={styles.normal}> <Badge color="blue"  />设备1</Col>   
                <Col span={12} className={styles.alarm}> <Badge color="yellow" />报警：0</Col>
                <Col span={12} className={styles.onLine}> <Badge color="#87d068"   />在线：0</Col>  
                <Col span={12}   className={styles.offLine}> <Badge color="red" />离线：1</Col>
              </Row>
            
              <Divider dashed    className={styles.dashedLine} />
              <Row> 
                <Col span={12} className={styles.loucengWL} ><div className={styles.louceng}>全部</div></Col>
                <Col span={12} className={styles.loucengWR} ><div className={styles.louceng}>一层</div></Col> 
                <Col span={12} className={styles.loucengWL} ><div className={styles.louceng}>一层</div></Col> 
                <Col span={12} className={styles.loucengWR} ><div className={styles.louceng}>一层</div></Col>
                <Col span={12} className={styles.loucengWL}  ><div className={styles.louceng}>一层</div></Col>
                <Col span={12} className={styles.loucengWR}  ><div className={styles.louceng}>一层</div></Col> 
              </Row>
            </div>
          </Col>
          <Col  span={shuosuostate==0?19:24} style={{ padding: 22 }} className={styles.servuychart}>
            <Row className={styles.rightBack}>   
                <span className={styles.zhankai}  style={{display: shuosuostate==0?'none':'block'}}  onClick={changeShouSuoState}>
                  <RightOutlined /> 展开 </span>
                  <span className={styles.flexAlignCenter}   onClick={()=>history.goBack()} >  <Image src={back}  preview={false} /> &nbsp; 返回上一级</span>
               {/* <a   onClick={()=>history.goBack()}  >    <RollbackOutlined  style={{    marginRight: '8px'}}/>返回上一级</a> */}
              </Row>
            <Row  className={styles.rightLeiming}>
               <Col>设备类名A <span className={styles.shebeiStateBtn} style={{    marginLeft: 30}}>在线</span></Col>
               <Col> 
                <Button className={styles.searchBtnBg}   type="primary"  > <RetweetOutlined />  复位 </Button>
                <Button style={{ backgroundColor: '#c92822'}} type="primary" > <MergeCellsOutlined />   分闸</Button>
                <Button className={styles.searchBtnBg} type="primary" > <MergeCellsOutlined />  合闸</Button>
                <Button type="primary" > <AudioMutedOutlined />   消音</Button>
                <Button className={styles.exporttBtn} style={{ backgroundColor: '#c11dc1'}} type="primary" > <InsuranceOutlined />   自检</Button>
                <Button className={styles.searchBtnBg} type="primary" > <RetweetOutlined />  能耗清零</Button>
                <Button className={styles.searchBtnBg} type="primary" > <RetweetOutlined />   策略设置</Button>
                </Col>
              </Row>
            <Row className={styles.tabletop}>

              <div  className={styles.normal}>
                实时数据
              </div>
              <div   className={styles.RTL} >
                <span>数据更新时间：2021-09-07 09:09:00</span>
                <span><Badge color="blue"/>正常</span>
                <span><Badge color="#f5222d"/>报警</span>
              </div>
            </Row>

            

            <div  >
              <Row>
                <Col span={4} className={styles.reltimeiitem} > 
                   <Card    className={styles.reltimeiitemCard}   title="电压" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>A相电压：216.8V</p>
                    <p>B相电压：223.9V</p>
                    <p>C相电压：217.9V</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card    className={styles.reltimeiitemCard}   title="线电压" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>AB相线电压：353.2V</p>
                    <p>BC相线电压：382.4V</p>
                    <p>AC相线电压：378.4V</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card   className={styles.reltimeiitemCard}     title="电流" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>A相电流：10.1A</p>
                    <p>B相电流：10.5A</p>
                    <p>C相电流：10.5A</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card    className={styles.reltimeiitemCard}   title="剩余电流" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>剩余电流：3.45mA</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card      title="温度" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>温度1：28.34 ℃</p>
                    <p>温度2：14.34 ℃</p>
                    <p>温度3：14.34 ℃</p>
                    <p>温度4：24.34 ℃</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card    className={styles.reltimeiitemCard}   title="有功电能" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>有功电能：26983.925kW.h</p>
                  </Card>
                </Col>


                <Col span={4} className={styles.reltimeiitem} > 
                  <Card    className={styles.reltimeiitemCard}   title="开关量" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>开关量输入1：关</p>
                    <p>开关量输入2：关</p>
               
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card   className={styles.reltimeiitemCard}     title="有功功率" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>总有功功率：11.32kW</p>
                    <p>A相有功功率：3.64kW </p>
                    <p>B相有功功率：3.99kW</p>
                    <p>C相有功功率：3.99kW</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card   className={styles.reltimeiitemCard}     title="无功功率" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>总无功功率：12.36kVar</p>
                    <p>A相无功功率：3.95kVar </p>
                    <p>B相无功功率：4.15kVar</p>
                    <p>C相无功功率：4.26kVar</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card      title="视在功率" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>总视在功率：11.32kVa</p>
                    <p>A相视在功率：3.64kVa </p>
                    <p>B相视在功率：3.99kVa</p>
                    <p>C相视在功率：3.99kVa</p>
                  </Card>
                </Col>
                <Col span={4} className={styles.reltimeiitem} > 
                  <Card      title="功率因数" headStyle={{    backgroundColor: '#143173',border: 0}}>
                    <p>总功率因数：1</p>
                    <p>A相功率因数：0.96</p>
                    <p>B相功率因数：0.58</p>
                    <p>C相功率因数：0.85</p>
                  </Card>
                </Col>
              </Row>
             
            </div>
            <Tabs defaultActiveKey="1" onChange={callback}>
              <TabPane tab="历史曲线" key="1">
              <Radio.Group defaultValue="one"  onChange={handleSizeChange} >
                <Radio.Button value="one" className={styles.radioitem}   >剩余电流</Radio.Button>
                <Radio.Button value="two" className={styles.radioitem} >温度</Radio.Button>
                <Radio.Button value="three" className={styles.radioitem} >电流</Radio.Button>
                <Radio.Button value="four" className={styles.radioitem} >电压</Radio.Button>
                <Radio.Button value="five" className={styles.radioitem} >有功电能</Radio.Button>
                <Radio.Button value="six" className={styles.radioitem} >有功功率</Radio.Button>
                <Radio.Button value="seven" className={styles.radioitem} >无功功率</Radio.Button>
                <Radio.Button value="eight" className={styles.radioitem} >视在功率</Radio.Button>
              </Radio.Group>
              <Row gutter={[0,24]} className={styles.flexend}>
                <div  className={styles.inputBg} >
                  <DatePicker  popupStyle={{ background: 'rgb(20, 49, 115)'}}    bordered={false} picker="date" />
                </div>
              </Row>
              <BarChart charOption={charOption} style={{ height: 400, width: '100%',marginBottom:20 }} />
              </TabPane>
              <TabPane tab="巡检记录" key="2">
                Content of Tab Pane 2
              </TabPane>
              <TabPane tab="报警信息" key="3">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="控制日志" key="4">
                Content of Tab Pane 3
              </TabPane>
              <TabPane tab="视频监控" key="5">
                Content of Tab Pane 3
              </TabPane>
            </Tabs>
           
          </Col>
        </Row>
      </>
    );
};

export default DeviceNameA;